<div class="form-group row">
    <label for="client-secret-type"
           class="col-sm-2 col-form-label">
        Type (*)
    </label>
    <div class="col-sm-10">
        <select class="form-control custom-select"
                id="client-secret-type"
                name="client-secret-type"
                [ngClass]="{ 'invalid': hostFormValidated && secret.invalid }"
                [(ngModel)]="clientSecret.type"
                required
                #secret="ngModel">
            <option value="SharedSecret">Shared Secret</option>
            <option value="X509Thumbprint">X509 Thumbprint</option>
        </select>
        <div *ngIf="hostFormValidated && secret.invalid"
             class="form-control-feedback text-danger">
            Field 'Type' is required.
        </div>
    </div>
</div>
<div class="form-group row">
    <label for="client-secret-value"
           class="col-sm-2 col-form-label">
        Value (*)
    </label>
    <div class="col-sm-10">
        <div class="input-group">
            <span *ngIf="clientSecret.type === 'SharedSecret'"
                  class="input-group-prepend cursor-pointer"
                  title="Generate a random value."
                  (click)="generateValue()">
                <span class="input-group-text">
                    <i class="material-icons align-middle font-12">add</i>
                </span>
            </span>
            <input class="form-control"
                   type="text"
                   id="client-secret-value"
                   name="client-secret-value"
                   [ngClass]="{ 'invalid': hostFormValidated && value.invalid }"
                   [(ngModel)]="clientSecret.value"
                   required
                   maxlength="4000"
                   #value="ngModel" />
        </div>
        <div class="text-muted">* You will not be able to access the value after adding it.</div>
        <div *ngIf="hostFormValidated && value.invalid"
             class="form-control-feedback text-danger">
            Field 'Value' is required.
        </div>
    </div>
</div>
<div class="form-group row">
    <label for="expiration-date"
           class="col-sm-2 col-form-label">
        Expiration Date
    </label>
    <div class="col-sm-10">
        <input class="form-control"
               type="text"
               id="expiration-date"
               name="expiration-date"
               placeholder="mm-dd-yyyy"
               [(ngModel)]="clientSecret.expiration"
               (focus)="datePicker.toggle()"
               ngbDatepicker
               #datePicker="ngbDatepicker" />
    </div>
</div>
<div class="form-group row">
    <label for="description"
           class="col-sm-2 col-form-label">
        Description
    </label>
    <div class="col-sm-10">
        <textarea class="form-control"
                  rows="3"
                  type="text"
                  id="description"
                  name="description"
                  [(ngModel)]="clientSecret.description"
                  maxlength="2000"
                  #description="ngModel">
        </textarea>
    </div>
</div>
<div class="form-group">
    <div>
        <button type="submit"
                class="btn btn-primary m-r-5"
                (click)="addClientSecret()">
            Add
        </button>
    </div>
</div>
<hr />
<div class="mt-3 mb-3">
    <div class="col-12">
        <app-list-view [clientSide]="true"
                       [rowsPerPage]="10"
                       [canFilter]="false"
                       [columns]="columns"
                       [rows]="rows"
                       [defaultSortDirection]="'Asc'"
                       #clientSecretsList>
        </app-list-view>
    </div>
    <ng-template let-row="row"
                 let-value="value"
                 #actionsTemplate>
        <button class="btn btn-danger"
                role="button"
                (click)="removeClientSecret(row)">
            Remove
        </button>
    </ng-template>
    <ng-template let-row="row"
                 let-value="value"
                 #optionalTemplate>
        <span *ngIf="value">{{ value }}</span>
        <span *ngIf="!value"> - </span>
    </ng-template>
</div>
<hr />